// 在JS中预先创建一个元素，不需要和页面进行交换
let errorDom = document.createElement("span");
errorDom.classList.add("error");

function blurUsername(){
    let usernameDom = document.querySelector(".register input[name=username]");
    // console.log(usernameDom)
    // 表单输入元素的DOM对象对应的 value 属性，就是表单输入框的用户输出值或者填充值
    // console.log(usernameDom.value)
    // usernameDom.value = "aaaaaa"
    let username = usernameDom.value;
    let flag = /\w{6,10}/.test(username);
    if(!flag){
        // DOM元素的对应的克隆
        let cloneDom = errorDom.cloneNode()
        cloneDom.innerText = "用户名不符合要求"
        // 获取当前元素的父元素
        usernameDom.parentElement.appendChild(cloneDom);
    }
}
function focusUsername(){
    let usernameDomParent = document.querySelector(".register input[name=username]").parentElement;
    let errorDom = usernameDomParent.querySelector(".error")
    if(errorDom!=null) usernameDomParent.removeChild(errorDom);
}

// 统一完成校验定义
// 设置表单的对应校验和消息提示
//      pattern 表示正则校验
//      repeat  和其它输入框数据进行校验
//      ……
let rules = {
    username:{ pattern:/\w{6,10}/,message:"用户名只能由6~11位的数字字母_组成" },
    password:{ pattern:/\w{6,10}/,message:"密码只能由6~11位的数字字母_组成" },
    repPassword:{ repeat:"password",message:"两次密码不一致" },
    email:{ pattern:/\w+@163\.[com,cn]/,message:"邮箱不合法" },
    phone:{ pattern:/1\d{10}/,message:"手机号不合法" }
};
let fromDom = null;
window.onload = function (){
    fromDom = document.querySelector(".register");
    let inputList = fromDom.querySelectorAll("input[name]")
    for (let inputDom of inputList) {
        inputDom.onblur = function (){
        //    失去焦点-数据校验
            let v = inputDom.value;
            let name = inputDom.name;
            let reg = rules[name]
            // 判断校验规则是否存在
            if(reg==undefined) return;
            if( reg.pattern!=undefined ){
                // 存在正则校验
                let flag = reg.pattern.test(v);
                if(!flag){
                    let temp = inputDom.parentElement.querySelector(".error");
                    if(temp==null){
                        temp = errorDom.cloneNode();
                        inputDom.parentElement.appendChild(temp);
                    }
                    temp.innerText = reg.message;
                    return; // 如果正则存在错误，后续的校验可以暂时不用处理
                }
            }
            if( reg.repeat!=undefined ){
                // 存在重复校验
                let vv = fromDom.querySelector(`input[name=${reg.repeat}]`).value;
                if(v!==vv){
                    let temp = inputDom.parentElement.querySelector(".error");
                    if(temp==null){
                        temp = errorDom.cloneNode();
                        inputDom.parentElement.appendChild(temp);
                    }
                    temp.innerText = reg.message;
                    return; // 如果正则存在错误，后续的校验可以暂时不用处理
                }
            }
        }
        inputDom.onfocus = function (){
        //     获取焦点-删除提示
            let parentDom = inputDom.parentElement;
            let errorDom = parentDom.querySelector(".error")
            if(errorDom!=null) parentDom.removeChild(errorDom);
        }
    }

}

// 统一的表单校验方法
function checkFormData(e){
    let inputList = document.querySelectorAll("input[name]")
    let allFlag = []
    for (let input of inputList) {
        let v = input.value;
        let reg = rules[ input.name ];
        if(reg.pattern!=undefined){
            let flag = reg.pattern.test(v);
            allFlag.push(flag);
            if(!flag){
                let temp = input.parentElement.querySelector(".error");
                if(temp==null){
                    temp = errorDom.cloneNode();
                    input.parentElement.appendChild(temp);
                }
                temp.innerText = reg.message;
                continue;
            }
        }
        if(reg.repeat!=undefined){
            let vv = fromDom.querySelector(`input[name=${reg.repeat}]`).value;
            let flag = v===vv;
            allFlag.push(flag);
            if(!flag){
                let temp = input.parentElement.querySelector(".error");
                if(temp==null){
                    temp = errorDom.cloneNode();
                    input.parentElement.appendChild(temp);
                }
                temp.innerText = reg.message;
                continue;
            }
        }
    }
    console.log(allFlag)
    // 通过数组 every 测试数组中的结果状态，如果存在一个未通过校验的结果(false),阻止跳转
    if( !allFlag.every( f=>f) ) e.preventDefault();
}